axios({ url: 'http://ajax-api.itheima.net/api/category/top' })
  .then(res => {
    const list = res.data.data
    const subPromiseArr = list.map(item => {
      return axios({ url: `http://ajax-api.itheima.net/api/category/sub?id=${item.id}` })
    })
    return Promise.all(subPromiseArr)
  })
  .then(arr => {
    // 数据加载完毕渲染
    const html = arr
      .map((item, i) => {
        // 子分类列表
        const subLis = item.data.data.children
          .map(
            sub => `
              <li>
                <a href="javascript:;">
                  <span>${sub.name}</span>
                  <img src="${sub.picture}" alt="">
                </a>
              </li>
            `
          )
          .join('')
        // 父分类列表
        return `
              <li>
                <a href="javascript:;">${item.data.data.name}</a>
                <ul class="sub">${subLis}</ul>
              </li>
            `
      })
      .join('')
    document.querySelector('.top').innerHTML = html
  })
